<template>
  <div class="detail">
    <h2>{{ detail.name }}</h2>
    <section class="content">
      <el-divider content-position="left">基础信息</el-divider>
      <p>
        <span v-if="detail.project && detail.project.name" class="span"><i class="el-icon-suitcase-1" />归属项目：{{ detail.project.name }}</span>
        <span v-if="detail.created_by && detail.created_by.nickname" class="span"><i class="el-icon-user" />创建人：{{ detail.created_by.nickname }}</span>
      </p>
      <p>
        <span v-if="detail.created_at" class="span"><i class="el-icon-time" />创建时间：{{ detail.created_at | filterFormatTime }}</span>
        <span v-if="detail.start_at" class="span"><i class="el-icon-time" />开始时间：{{ detail.start_at | filterFormatTime }}</span>
        <span v-if="detail.deadline_at" class="span"><i class="el-icon-time" />截止时间：{{ detail.deadline_at | filterFormatTime }}</span>
      </p>
      <p>
        <span v-if="detail.status" class="span"><i class="el-icon-warning-outline" />状态：
          <el-tag effect="light" :type="detail.status | statusFilter">
            {{ detail.status | statusName }}
          </el-tag>
        </span>
        <span v-if="detail.weight" class="span"><i class="el-icon-warning-outline" />任务系数：{{ detail.weight }}</span>
        <span v-if="detail.priority" class="span"><i class="el-icon-warning-outline" />优先级：
          <el-tag effect="dark" :type="detail.priority | priorityFilter">
            {{ detail.priority | priorityName }}
          </el-tag>
        </span>
      </p>
      <p>
        <span v-if="detail.execute_by && detail.execute_by.length" class="span"><i class="el-icon-user-solid" />执行人：
          <b v-for="(user, idx) of detail.execute_by" :key="user.id">{{ user.nickname }}{{ idx === detail.execute_by.length - 1 ? '' : '、' }}</b>
        </span>
        <span v-if="detail.review_by && detail.review_by.nickname" class="span"><i class="el-icon-s-custom" />核查人：{{ detail.review_by.nickname }}</span>
        <span class="span"><i class="el-icon-view" />进度：{{ detail.progress }}%</span>
        <span class="span"><i class="el-icon-finished" />核查状态：{{ detail.review_status ? '已核查' : '未核查' }}</span>
      </p>
      <p>
        <span class="span"><i class="el-icon-coin" />得分：{{ detail.score || 0 }}</span>
      </p>
      <el-divider v-if="detail.intro" content-position="left">描述</el-divider>
      <p class="intro" v-html="detail.intro" />
    </section>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'

export default {
  filters: {
    filterFormatTime(date) {
      return parseTime(date, '{y}-{m}-{d} {h}:{i}')
    },
    statusFilter(status) {
      const statusMap = {
        1: 'warning',
        2: 'danger',
        3: 'success',
        4: 'info'
      }
      return statusMap[status]
    },
    statusName(status) {
      const statusMap = {
        1: '未开始',
        2: '进行中',
        3: '已完成',
        4: '取消'
      }
      return statusMap[status]
    },
    priorityFilter(priority) {
      const priorityMap = {
        1: 'danger',
        2: 'danger',
        3: 'warning',
        4: 'info'
      }
      return priorityMap[priority]
    },
    priorityName(priority) {
      const priorityMap = {
        1: '非常高',
        2: '高',
        3: '一般',
        4: '低'
      }
      return priorityMap[priority]
    }
  },
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 0 1rem;
}
.content {
  max-height:90vh;
  overflow-x: hidden;
  overflow-y:auto;
}
p .span {
  margin-right: 2rem;
}
span i {
  margin-right: 0.5rem;
}
.intro /deep/ div {
  line-height: 1.8;
}
</style>
